<template>
	<view class="page">
		<view class="title">
			3.12.【热梗案例】知识点阶段性综合汇总
		</view>
		<view class="p">
			<view class="box">
				<view class="todolist flex center" v-for="(item,index) in hopes" :key="item.id">
					<checkbox></checkbox>
					<text class="item one-line">{{item.hope}}</text>
					<icon type="clear" size="26" @click="del(index)" style="line-height: 1;" />
				</view>
				<view class="">
					共计{{hopes.length}}条愿望
				</view>
			</view>
		</view>
		<view class="p">
			<view class="box flex center">
				<input type="text" @confirm="onsubmit" class="item" placeholder="请输入你的愿望吧" v-model="hopetext" />
				<button @click="onsubmit" :disabled="!hopetext.length" type="primary" size="mini"> 提交</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const hopes = ref([{
			id: 1,
			hope: "来几个嫩模打扑克"
		},
		{
			id: 2,
			hope: "来几个学生妹看电影"
		},
		{
			id: 3,
			hope: "来几个未成年看奥特曼"
		}
	]);

	const hopetext = ref("")

	const del = (index) => {
		hopes.value.splice(index, 1)
	}

	// let newid = hopes.value.length();
	const onsubmit = () => {
		hopes.value.push({
			id: Date.now(),
			hope: hopetext.value
		})
		hopetext.value = ''
	}
</script>

<style lang="scss" scoped>
	.todolist {
		padding: 24rpx 12rpx;
	}
</style>